<template>
  <a-modal
    :maskClosable="false"
    :title="`门店详情 - ${info?info.name:''}（${info?info.id:''}）`"
    :width="1000"
    :visible="showModal"
    :confirm-loading="confirmLoading"
    @cancel="cancel()"
  >
    <template #footer>
      <a-button v-if="$permissionJudge('VendorChangeStoreSubject')" @click="cancel(true)">修改门店信息</a-button>
      <a-button type="primary" @click="showModal=false">
        确定
      </a-button>
    </template>
    <template v-if="showModal">
      <a-tabs :default-active-key="1" style="margin:-15px;" @change="tabChange">
        <a-tab-pane :key="1" tab="基本信息">
          <template v-if="info">
            <a-row :gutter="[24,0]">
              <a-col :span="12">
                <a-form-item class="mb-15" label="门店名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.name }}
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item class="mb-15" label="门店编号" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.id }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="12">
                <a-form-item class="mb-15" label="服务商" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info && info.vendorName }}
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item class="mb-15" label="门店状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                <span :class="{'success-color':info.status===1,'grey':info.status===2,'warning-color':info.status===3}">{{
                    stateList.find(l => l.value === info.status).name
                  }}</span>
                  <span class="ml-5 colororange" v-if="info.status===3&&info.auditType===1">申请创建</span>
                  <span class="ml-5 colororange" v-if="info.status===2&&info.auditType===2">修改信息待审中</span>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="12">
                <a-form-item class="mb-15" label="联系人" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.contactName }}
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item class="mb-15" label="联系方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.telephone }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="12">
                <a-form-item class="mb-15" label="门店联系人手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.contactPhoneNumber }}
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item class="mb-15" label="所在城市" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.cityName }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="12">
                <a-form-item class="mb-15" label="营业时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <template v-if="info.openingTime">
                    周一 至 周日 {{ info.openingTime }} - {{ info.closingTime }}（{{
                      info.isOpenTwentyfourHours ? '24小时营业' : '按时营业'
                    }}）
                  </template>
                  <template v-else>
                    {{
                      info.isOpenTwentyfourHours ? '24小时营业' : '按时营业'
                    }}
                  </template>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item class="mb-15" label="预定提前时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                  {{ info.aheadHour?info.aheadHour+'小时':'未知' }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="12">
                <a-form-item class="mb-15" label="送取车方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-tag color="#108ee9" v-if="info.arrivalType!==0">
                    {{ info.arrivalType === 1 ? '上门取车还车' : '门店取车还车' }}
                  </a-tag>
                  <span v-else>未知</span>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item class="mb-15" label="上门送取车费用" :label-col="labelCol" :wrapper-col="wrapperCol">
                  　{{ info.fee ? info.fee + '元/次' : '免费' }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="24">
                <a-form-item style="margin-left: 18px;" class="mb-15" label="详细地址" :label-col="{span: 4}"
                             :wrapper-col="{span: 20}">
                  {{ info.address }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[24,0]">
              <a-col :span="18">
                <a-form-item class="mb-15" label="经营执照与门头照片" style="margin-left: 42px;">
                  <multipleShowList ref="fileList" :scene="2" :fileLength="0"/>
                </a-form-item>
              </a-col>
            </a-row>
          </template>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="服务时间与范围">
          <a-form-item class="mb-15" label="服务时间">
            <a-table
              class="table-con"
              row-key="id"
              :loading="loading"
              :columns="columns"
              :data-source="data"
              :pagination="false"
            >
              <template #name="val,data">
                <p class="mb-0"><span class="color-box w-30 h-15 " :style="{background: data.color}"></span>{{ val }}</p>
              </template>
              <template #openingTime="val,data">
                {{ data.openingTime }} - {{ data.closingTime }}
              </template>
              <template #aheadHour="val,data">{{ val }}小时</template>
              <template #fee="val,data">
                {{ val ? val + '元/次' : '免费' }}
              </template>
              <template #arrivalType="val,data">
                <a-tag color="#108ee9" v-if="data.arrivalType!==0">
                  {{ data.arrivalType === 1 ? '上门取车还车' : '门店取车还车' }}
                </a-tag>
                <span v-else>未知</span>
              </template>
            </a-table>
          </a-form-item>
          <a-form-item class="mb-15" label="服务范围">
            <mapView ref="mapView" :rangMap="rangMap"></mapView>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
    </template>
  </a-modal>
</template>
<script>
  import multipleShowList from '@/components/Upload/multipleShowList'
  import {getStoreDetail, getStoreServiceScopeList} from '@/api/store'
  import mapView from './mapView'

  export default {
    name: 'StoreSituationInfo',
    props: {
      stateList: {
        type: Array,
        default: () => []
      }
    },
    components: {multipleShowList, mapView},
    data() {
      return {
        loading: false,
        id: '',
        labelCol: {span: 9},
        wrapperCol: {span: 15},
        showModal: false,
        confirmLoading: false,
        columns: [
          {dataIndex: 'name', title: '范围名称', scopedSlots: {customRender: 'name'}, align: 'center'},
          {
            dataIndex: 'openingTime',
            title: '服务时间',
            scopedSlots: {customRender: 'openingTime'},
            align: 'center'
          },
          {dataIndex: 'aheadHour', title: '提前预约时间', align: 'center', scopedSlots: {customRender: 'aheadHour'}},
          {dataIndex: 'fee', title: '送取车费用', align: 'center', scopedSlots: {customRender: 'fee'}},
          {dataIndex: 'arrivalType', title: '到达方式', scopedSlots: {customRender: 'arrivalType'}, align: 'center'}
        ],
        data: [],
        info: null,
        rangMap: []
      }
    },
    methods: {
      tabChange(e) {
        e === 1 ? this.getData(this.info) : this.getStoreData()
      },
      getStoreData() {
        console.log(this.info)
        getStoreServiceScopeList({
          storeId: this.id,
          isContainDisable: true
        }).then(res => {
          this.data = res
          this.rangMap = res.map(item => {
            return {
              coordinatesArr: item.coordinatesArr.length > 0 && item.coordinatesArr.map((j) => {
                return j.map((l) => {
                  return [l.lng, l.lat]
                })
              }),
              isSystemGenerate:item.isSystemGenerate,
              color: item.color, name: item.name
            }
          })
          console.log('rangMap', this.rangMap)
          this.$nextTick(() => {
            const {longitude, latitude} = this.info
            this.$refs.mapView.iniMap({longitude, latitude})
          })
        })
      },
      getData(data) {
        this.showModal = true
        this.loading = true
        this.id = data.id
        getStoreDetail({storeId: data.id}).then(res => {
          const {imgUrl} = res
          const imgUrlarr = imgUrl ? imgUrl.indexOf(',') ? imgUrl.split(',') : [imgUrl] : undefined
          this.info = res
          this.$nextTick(() => {
            if (imgUrlarr && imgUrlarr.length) {
              const fileList = imgUrlarr.map(item => ({
                name: 'image.png',
                status: 'done',
                url: item,
                uid: this.$utils.uuid()
              }))
              this.fileList = fileList
              this.$refs.fileList.setFileList(fileList)
            }
          })
        }).finally(() => {
          this.loading = false
        })
      },
      cancel(type) {
        if (type) this.$emit('editStore', {id: this.info.id})
        this.showModal = false
      }
    }
  }
</script>
<style lang="less" scoped>
.color-box{display: inline-block;margin-right: 5px;vertical-align: center;}
</style>
